<template>
	<view class="content">
		<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"    @touchmove.stop.prevent="moveHandle"  @click="closeSheet()">
			<scroll-view scroll-y="true"  class="sheetView pickerbox"   :class="{sheetView_active:isShowBottom}"   @click.stop="stopEvent()" >
				<view class="title">
					产品参数
				</view>
				<view class="box">
					品牌：<text>{{param.brandName}}</text>
				</view>
				<view class="box">
					货号：<text>{{param.productSn}}</text>
				</view>
				<view class="box">
					发货地：<text>{{startSend}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		name : "bottomSheet",
		data(){
			return{
				isShowBottom:false,
				startSend:"",
				param:{}
				
			}
		},	
		mounted() {
			this.isShowBottom = this.$parent.isShowBottom
			this.startSend = this.$parent.startSend
			this.param = this.$parent.param
		},
		methods: {
			closeSheet(){					
				this.$emit('closeBottom');
			},
			stopEvent(){						//@click.stop防止事件冒泡
				
			},
			moveHandle(){						//不让页面滚动
				
			}
		}
	}
</script>

<style scoped>
	/* sheet弹窗 */
	.sheet{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 120%;
		left: 0upx;
		bottom: 0upx;
		right: 0upx;
		background:rgba(0,0,0,0.3);
		z-index: 10000;
	}
	
	/* 显示时候的动画默认0.5s */
	.sheetView{
		width: 100%;
		height: 0upx;
		position: absolute;
		bottom: 0upx;
		background: white;
		z-index: 10001;
		transition: all 0.5s;
	}
	.sheetShow{
		top:0upx !important;
	}
	/* 关闭时的动画，时间自己可以设置0.5s*/
	.sheeHide{
		top:120% !important;
		transition: all 0.5s;		
	}
	
	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	.sheetView_active{
		height: 653upx;
		background-color: #fff;
		border-radius: 30upx 30upx 0 0;
	}
	
	.pickerbox .box{
		font-size: 28upx;
		color: #333;
		border-bottom: 1px solid #e6e6e6;
		padding: 30upx;
	}
	.pickerbox .title{
		font-size: 32upx;
		color: #333;
		font-weight: bold;
		text-align: center;
		border: none;
		padding: 30upx;
	}
	
</style>
